<template>
    <view class="mr-input" :style="{ 'background-image': 'url(' + EnumBG.BU1 + ')' }">
      <input placeholder="请输入你金额" v-model="userInput" >
    </view>
    <view class="mr-commit" @click="commit" :class="sizeStatus ? 'mr-commit-big' : 'mr-commit-small'" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">观看广告查询</view>
    <LandscapeModel v-model:show="show" :sonFun="sonFun"/>
  </template>
  
  <script setup lang="ts">
  import {  EnumBG } from "@/utils/content";
  import LandscapeModel from "@/components/Landscape/LandscapeModel.vue";
  import { EnumStatus } from "@/utils/constants";
  const sizeStatus = ref(false)
  const show = ref(false)
  const emit = defineEmits(['update:defStatus','update:content'])
  const startTimer = () => {
    setInterval(() => {
        sizeStatus.value =  !sizeStatus.value
    }, 1000); // 每秒执行一次
  };
  const userInput = ref("")
  const sonFun = ()=>{
    uni.hideLoading();
    const data = convertCurrency(userInput.value)
    emit('update:content',data)
    emit('update:defStatus',EnumStatus.RESULT)
}
const commit = ()=>{
    if(!userInput.value || !Number(userInput.value)){
        uni.showToast({
        title: "请输入金额或者数字",
        duration: 2000,
        icon:"none"
      });
      return
    }
    show.value = true
}

const convertCurrency = (currencyDigits:string)=>{
    var MAXIMUM_NUMBER = 99999999999.99;
        // Predefine the radix characters and currency symbols for output:
        var CN_ZERO = "零";
        var CN_ONE = "壹";
        var CN_TWO = "贰";
        var CN_THREE = "叁";
        var CN_FOUR = "肆";
        var CN_FIVE = "伍";
        var CN_SIX = "陆";
        var CN_SEVEN = "柒";
        var CN_EIGHT = "捌";
        var CN_NINE = "玖";
        var CN_TEN = "拾";
        var CN_HUNDRED = "佰";
        var CN_THOUSAND = "仟";
        var CN_TEN_THOUSAND = "万";
        var CN_HUNDRED_MILLION = "亿";
        var CN_SYMBOL = "";
        var CN_DOLLAR = "元";
        var CN_TEN_CENT = "角";
        var CN_CENT = "分";
        var CN_INTEGER = "整";
        var integral;    
        var decimal;   
        var outputCharacters;    
        var parts;
        var digits, radices, bigRadices, decimals;
        var zeroCount;
        var i, p, d;
        var quotient, modulus;
        currencyDigits = currencyDigits.toString();
        if (currencyDigits == "") {
            alert("您的输入为空！");
            return "";
        }
        if (currencyDigits.match(/[^,.\d]/) != null) {
            alert("输入包含非法字符!");
            return "";
        }
        if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
            alert("输入有误!");
            return "";
        }
        currencyDigits = currencyDigits.replace(/,/g, ""); 
        currencyDigits = currencyDigits.replace(/^0+/, ""); 
        // Assert the number is not greater than the maximum number.
        if (Number(currencyDigits) > MAXIMUM_NUMBER) {
            alert("数额太大，转换金额上限小于1千亿!");
            return "";
        }

// Process the coversion from currency digits to characters:
        // Separate integral and decimal parts before processing coversion:
        parts = currencyDigits.split(".");
        if (parts.length > 1) {
            integral = parts[0];
            decimal = parts[1];
            // Cut down redundant decimal digits that are after the second.
            decimal = decimal.substr(0, 2);
        }
        else {
            integral = parts[0];
            decimal = "";
        }
        // Prepare the characters corresponding to the digits:
        digits = new Array(CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT, CN_NINE);
        radices = new Array("", CN_TEN, CN_HUNDRED, CN_THOUSAND);
        bigRadices = new Array("", CN_TEN_THOUSAND, CN_HUNDRED_MILLION);
        decimals = new Array(CN_TEN_CENT, CN_CENT);
        // Start processing:
        outputCharacters = "";
        // Process integral part if it is larger than 0:
        if (Number(integral) > 0) {
            zeroCount = 0;
            for (i = 0; i < integral.length; i++) {
                p = integral.length - i - 1;
                d = integral.substr(i, 1);
                quotient = p / 4;
                modulus = p % 4;
                if (d == "0") {
                    zeroCount++;
                }
                else {
                    if (zeroCount > 0)
                    {
                        outputCharacters += digits[0];
                    }
                    zeroCount = 0;
                    outputCharacters += digits[Number(d)] + radices[modulus];
                }
                if (modulus == 0 && zeroCount < 4) {
                    outputCharacters += bigRadices[quotient];
                }
            }
            outputCharacters += CN_DOLLAR;
        }
        // Process decimal part if there is:
        if (decimal != "") {
            for (i = 0; i < decimal.length; i++) {
                d = decimal.substr(i, 1);
                if (d != "0") {
                    outputCharacters += digits[Number(d)] + decimals[i];
                }
            }
        }
        // Confirm and return the final output string:
        if (outputCharacters == "") {
            outputCharacters = CN_ZERO + CN_DOLLAR;
        }
        if (decimal == "") {
            outputCharacters += CN_INTEGER;
        }
        outputCharacters = CN_SYMBOL + outputCharacters;

        return outputCharacters;

}

  onMounted(()=>{
      startTimer()
  })
  </script>
  
  <style lang="scss" scoped>
  .mr-commit{
      z-index: 102;
      position: absolute;
      top: 75%;
      width: 46%;
      height: 130rpx;
      left: 27%;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
  }
  .mr-commit-big{
      top: 76%;
      width: 50%;
      height: 150rpx;
      left: 25%;
      transition: all 1s;
  }
  .mr-commit-small{
      top: 75%;
      width: 46%;
      height: 130rpx;
      left: 27%;
      transition: all 1s;
  }
  .mr-input{
      z-index: 102;
      position: absolute;
      top: 50%;
      left: 15%;
      width: 70%;
      height: 150rpx;
      background-size: 100% 100%;
      input{
          width: 100%;
          height: 100%;
          text-align: center;
          color: white;
      }
  }
  
  </style>
  